<template>
  <div class="pay">
    <div class="pay-first">
      <div class="first-title" style="color: #0070ba;font-size: 20px">ANBIO BIOTECHNOLOGY</div>
      <div class="first-title" style="font-size: 18px">Payouts</div>
      <div class="first-price">
        <div class="container">
          <div class="box-right">
            <div class="box-right-bottom price-title" style="color: black;font-size: 24px">Payouts details</div>
          </div>
        </div>
      </div>
      <div class="context">
        <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="{
             background:'#faf8f5',
             color:'#0060df',
           }">
          <el-table-column
              prop="stime"
              label="Time"
              width="230"
              align="center"
             >
          </el-table-column>
          <el-table-column
              prop="ordernum"
              label="Transaction ID"
              align="center"
             >
          </el-table-column>
          <el-table-column
              prop="status"
              label="Status"
              align="center"
              >
            <template slot-scope="scope">
              <div style="color: green;font-size: 16px" v-if=" scope.row.status==1">SUCCESS</div>
              <div style="color: red;font-size: 16px" v-if=" scope.row.status==0">FAILL</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="account"
              label="Accout"
              align="center"
              >
            <template slot-scope="scope">
              <div  style="color:#0070ba;font-size: 16px">{{scope.row.account}}</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="amount"
              label="Amount"
              align="center"
              >
            <template slot-scope="scope">
            <div style="color: black;font-size: 16px" >${{formatNumber(scope.row.amount)}}&nbsp;USD</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="remark"
              label="Remark"
              align="center"
            >
            <template slot-scope="scope">
              <div  style="color:black;font-size: 16px">{{scope.row.remark}}</div>
            </template>
          </el-table-column>
          <template slot="empty">
            <div class="empty-block">
              <div class="empty-block-text">No Data</div>
            </div>
          </template>
        </el-table>
        <div class="view" @click="viewAll" v-if=Vshow>View all</div>
        <div class="view" @click="recently" v-if=!Vshow>recently</div>
      </div>
    </div>
  </div>
</template>

<script>
import {cashPayouts} from "@/api";

export default {
  data() {
    return {
      payShow: false,
      Vshow:true,
      tableData: [,

      ],
      current:1,
      pageSize : 10
    }
  },
  mounted() {
    let param={}
    param.pageNo = this.current;
    param.pageSize = this.pageSize;
    this.CashPayouts(param);
  },
  methods: {
    CashPayouts(params) {
      params.column = "stime";
      params.order = "desc";
      cashPayouts(params).then((res) => {
        if (res.success == true) {
          for (let i=0;i<res.result.records.length;i++)
         /* {
            res.result.records[i].stime=this.formatDate(res.result.records[i].stime);
          }*/
          this.tableData=res.result.records


        }
      });
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const month = date.getMonth() + 1; // 月份是从0开始的，所以需要+1
      const day = date.getDate();
      const year = date.getFullYear();
      // 使用两位数字表示月份和日期
      return (`${month.toString().padStart(2, '0')}/${day.toString().padStart(2, '0')}/${year}`);
    } ,
    viewAll()
    {
      let param={}
      param.pageNo = 1;
      param.pageSize = 1000;
      this.Vshow=false;
      this.CashPayouts(param);
    },
    formatNumber(number) {
      return number.toFixed(2);
    },
    recently()
    {
      let param={}
      param.pageNo = 1;
      param.pageSize = 10;
      this.Vshow=true;
      this.CashPayouts(param);
    }

  },
};
</script>

<style lang="less" scoped>
.pay {
  min-height: calc(100vh - 70px);
  background: #fff;

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .pay-first {
    .first-title {
      padding: 40px 200px 0;
      box-sizing: border-box;
      font-size: 18px;
      font-weight: 500;
      text-align: left;
    }

    .first-price {
      background: #faf8f5;
      padding: 40px 40px 40px 200px;
      box-sizing: border-box;
      margin-top: 40px;
      text-align: left;

      .price-text {

        font-weight: 600;
        font-size: 24px;
        //letter-spacing: 1px;
      }

      .price-title {
        margin-top: 5px;
        //color: #000;
        font-size: 14px;
        font-weight: lighter;
      }
    }

    /* 外层容器样式，使用flex布局 */
    .container {
      display: flex;
      height: 100px;
      width: 300px;
      justify-content: space-between;
      align-items: flex-start;
    }

    /* 左边的盒子样式 */
    .box-left {
      width: 100px;
      height: 100px;

    }

    /* 右边盒子的共同样式 */
    .box-right {
      display: flex;
      margin-left: 10px;
      flex-direction: column;
      width: 200px;
    }

    /* 右边靠上的盒子样式 */
    .box-right-top {
      height: 50px;
      line-height:60px

    }

    /* 右边靠下的盒子样式 */
    .box-right-bottom {
      height: 40px;

    }

    /* 所有盒子的通用样式 */
    .box {

      padding: 10px;
      margin: 10px;
    }

    .view
    {
      color: #0060df;
      cursor: pointer; /* 设置鼠标指针样式为手型 */
      transition: all 0.3s ease;
      margin-top: 20px;
    }

    .context {
      padding: 0px 40px 40px 200px;
      box-sizing: border-box;
      margin-top: 40px;
      text-align: left;
    }

  }
}
</style>
